<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-10-10 15:55:34
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-10-10 16:34:23
-->
<template>
  <div class="home" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <Header v-if="!loading" />

    <!-- 绘制工具 -->
    <DrawTool v-if="!loading && tools" />

    <!-- 天气组件 --> 
    <Weather v-if="!loading" />

    <!-- 地球 -->
    <Screen @onReady="handleReady" />

  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Screen from "../../components/screen";
import Header from "@/components/Header.vue";
import Weather from "@/components/Weather.vue";
import DrawTool from "../../components/toolBar";

export default {
  data() {
    return {
      loading: true,
    };
  },
  components: {
    // LeftMenu,
    // LeftPanel,
    Weather,
    DrawTool,
    Screen,
    Header
  },
  created () {
    window.document.documentElement.setAttribute( "data-theme", 'dark' );
  },
  computed: {
    ...mapState("setting",['tools'])
  },
  methods: {
    ...mapMutations("leftMenu", ["selectTool"]),
    handleReady() {
      this.loading = false;
    },
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  destroyed() {
    // 关闭left-panel
    this.selectTool("sleeping");
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  color: #fff;
}

// 滚动条
.home::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

.home::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px #35486b;
  background: #080c13;
  border-color: transparent;
}

.home::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #35486b;
  background: #080c13;
  border-color: transparent;
}
</style>